<template>
    <base-page class="column">
        <base-header title="单词列表">
            <md-icon name="plus" style="margin-left: auto" class="mr16" size="lg" svg slot="right"
                     @click="open = true"></md-icon>
        </base-header>
        <keep-roll>
            <base-page-content class="col ofay">
                <ul class="my-list mb30 row row-wrap">
                    <li v-for="(i, index) in text" :key="index" class="square rel  white-bg">
                        <div class="center ca absfull f28 txt">{{i}}</div>
                        <div class="abs posbl full-width px6 pb6">
                            <app-progress :all="29" :current="getWeight(i)"></app-progress>
                        </div>
                    </li>
                </ul>
            </base-page-content>
        </keep-roll>
        <md-dialog
                title="添加单词"
                :closable="false"
                v-model="open"
                :btns="btns"
        >
            <md-input-item
                    ref="name"
                    title="单词"
                    v-model="add_words"
                    placeholder="请输入单词"
                    is-title-latent
                    clearable
            ></md-input-item>
        </md-dialog>
    </base-page>
</template>
<script>
    import { getWordList, getWeight } from '@/utils/word';
    import AppProgress from './AppProgress';
    import '@/assets/svg/plus.svg';


    export default {
        data() {
            this.text = getWordList();
            return {
                add_words: '',
                open: false,
                btns: [
                    {
                        text: '取消',
                        handler: () => this.open = false,
                    },
                    {
                        text: '确认操作',
                        handler: this.addWords,
                    }
                ]
            };
        },
        created() {
            console.log(this);
        },
        methods: {
            getWeight(v) {
                return getWeight(v);
            },
            addWords() {
                this.open = false;

            }
        },
        watch: {
            open() {
                this.add_words = '';
            }
        },
        components: {
            AppProgress
        }
    };
</script>
<style lang="scss" scoped>
    $grap: 10px;
    $col: 4;
    $width: calc((100vw - #{$grap * $col + $grap}) / #{$col});
    .my-list {
        padding: 0;
        margin-top: 0;

        li {
            width: $width;
            margin-left: $grap;
            margin-top: $grap;

            &:active {
                transform: scale(1.1);
            }
        }
    }
</style>
